<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>新输入类型</title>
</head>
<body>
<form name="form1">
    <p><label for="min-value">Min: <input id="min-value" type="number" name="minValue"></label></p>
    <p><label for="max-value">Max: <input id="max-value" type="number" name="maxValue"></label></p>
    <p><label for="step-value">Setp: <input id="step-value" type="number" name="stepValue"></label></p>
    <p><label for="slider"><input id="slider" type="range" name="slider"></label></p>
</form>
<div id="output"></div>
<script>
    var myForm = document.form1;
    var output = document.getElementById('output');

    function formInputChange() {
        var slider = myForm.slider;
        slider.min = parseFloat(myForm.minValue.value);
        slider.max = parseFloat(myForm.maxValue.value);
        slider.step = parseFloat(myForm.stepValue.value);
        output.innerHTML = slider.value;
    }

    myForm.addEventListener('input', formInputChange);
</script>
</body>
</html>